﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>物料产品分类</title>
       <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

    <style>
        .layui-table-cell {
            padding: 10px; /* 增加单元格内边距 */
        }

        .layui-icon-file {
            font-size: 18px; /* 图标大小 */
        }

        .layui-table-cell span {
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

            .layui-table-cell span:hover {
                background-color: #f2f2f2; /* 悬停时改变背景色 */
            }
    </style>
</head>

<body>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <input type="text" id="sysName" name="sysName" value="" placeholder="请输入分类名称" class="layui-input" style="width: 300px;">
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-inline">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-inline">
                    <select name="enAbled" id="enAbled" lay-search>
                        <option value="">选择是或否</option>
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-col-md4 layui-col-xs12">
            <div class="layui-btn-container">
                <!-- 查询按钮 -->
                <button id="btnSearch" class="layui-btn layui-bg-blue" lay-submit lay-filter="demo-table-search">查询</button>
                <!-- 重置按钮 -->
                <button id="btnReset" type="button" class="layui-btn layui-btn-primary" onclick="location.reload()">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="ID-treeTable-demo" lay-filter="ID-treeTable-demo"></table>
    <script type="text/html" id="TPL-treeTable-demo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
           <button class="layui-btn layui-btn-sm " id="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-sm" id="btn-fold">全部折叠</button>
            <button class="layui-btn layui-btn-sm" id="btn-refresh">刷新表格</button>
        </div>
    </script>
    <script type="text/html" id="TPL-treeTable-demo-tools">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
          <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
        </div>
    </script>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="~/libs/jquery/jquery.js"></script>
     <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

    <script>
        layui.config({
            base: '../module/' //layui自定义模块目录
        }).extend({
            treetable: 'treetable-lay/treetable' // 加载 treeTable 扩展
        }).use(['layer', 'table','treetable'],function() {
            var $ = layui.jquery;
             var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;

            var renderTable = function () {
                 var sysName=$("[name='sysName']").val();
                 layer.load(2);
                 treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    treeDefaultClose: false,
                    treeLinkage: false,
                    elem: '#ID-treeTable-demo',
                   /*  url: '/Material/GetMaterialType?sysName=' + sysName + '&enAbled=' + $('#enAbled').val(),*/
                   url: '/Material/GetMaterialProductsTypeList?sysName='+sysName,
                    page:true,
                    cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'sysName', title: '分类名称', width: 200, align: 'center'},
                        { field: 'orderID', title: '排序', width: 200, align: 'center' },
                        { field: 'product', title: '物料产品', width: 200, align: 'center' },
                        { field: 'enAbled', title: '是否启用', width: 100, sort: true, align: 'center', templet: function(d)
                                {
                                    if(d.enAbled==1)
                                    {
                                        return "是";
                                    }
                                    else
                                    {
                                        return "否";
                                    }
                                },
                        },
                        { field: 'createTime', title: '创建时间', width: 200, align: 'center',templet : function(d)
                            {
                                return d.createTime.substr(0,19).replace("T"," ");
                            }
                        },
                        { field: 'pid', title: '父级Id',width: 200, align: 'center' },
                        { fixed: "right", title: "操作", width: 190, align: "center"}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                }); 
            }

        });
    </script>


@*     <script>
        layui.use(function(){
          var treeTable = layui.treeTable;
          var layer = layui.layer;
          var dropdown = layui.dropdown;

          // 渲染
          var inst = treeTable.render({
              treeColIndex: 1,
             treeSpid: 0,
               treeIdName:'id',
              treePidName: 'pid',
              treeDefaultClose: false,
              treeLinkage: false,
              showIcon: true,
               tree: {
                   view:{
                       showIcon: true,
                   },

              // 异步加载子节点
              // async: {
              //   enable: true,
              //   url: '/Material/GetMaterialType?sysName=' + $('#sysName').val() + '&enAbled=' + $('#enAbled').val(), //此处为静态模拟数据，实际使用时需换成真实接口
              //   autoParam: ["pid=id"]
              // }

            },
            iconOpen: 'layui-icon layui-icon-down',
            iconClose: 'layui-icon layui-icon-right',
            icon:{
                open: 'layui-icon layui-icon-down',
                close: 'layui-icon layui-icon-right',
                left:16,
            },
            elem: '#ID-treeTable-demo',
            url: '/Material/GetMaterialType?sysName=' + $('#sysName').val() + '&enAbled=' + $('#enAbled').val(), // 数据接口', // 此处为静态模拟数据，实际使用时需换成真实接口
            maxHeight: '501px',
            toolbar: '#TPL-treeTable-demo',
               cols: [[ //表头
                        { type: 'checkbox', fixed: 'left' },
                         { field: 'sysName', title: '分类名称', width: 200, align: 'center',templet : function(d)
                                {
                                    return  '<i class="layui-btn layui-btn-xs layui-icon layui-icon-down">' + d.sysName + '</i>' ;
                                }
                         },
                        { field: 'orderID', title: '排序', width: 200, align: 'center' },
                        { field: 'product', title: '物料产品', width: 200, align: 'center' },
                        { field: 'enAbled', title: '是否启用', width: 100, sort: true, align: 'center', templet: function(d)
                                {
                                    if(d.enAbled==1)
                                    {
                                        return "是";
                                    }
                                    else
                                    {
                                        return "否";
                                    }
                                },
                        },
                         { field: 'createTime', title: '创建时间', width: 200, align: 'center',templet : function(d)
                            {
                                return d.createTime.substr(0,19).replace("T"," ");
                            }
                         },
                          { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools"}
                    ]],
                    height: 400
          });
          treeTable.expandAll('ID-treeTable-demo', true);

           $('#btn-expand').click(function () {
                treetable.expandAll('#table1');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#table1');
            });

            $('#btn-refresh').click(function () {
                renderTable();
            });

          // 表头工具栏工具事件
          treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
            var config = obj.config;
            var tableId = config.id;
            var status = treeTable.checkStatus(tableId);
            // 获取选中行
            if (obj.event === "getChecked") {
              if(!status.data.length) return layer.msg('无选中数据');
              // layer.alert(JSON.stringify(status.data));
              console.log(status);
              layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
            }
          });
        });
    </script>
 *@


</body>

</html>
